<template>
  <div>
    <el-card header="菜单管理">
      <!--<MForm :fields="fields" @submit="search" @cancel="search"> </MForm>-->
      <MTable
        :columns="columns"
        :data="tableData"
        :params="params"
        v-model:isReload="isReload"
        v-model:selectKeys="selectKeys"
        height="calc(100vh - 330px)"
        rowKey="id"
        :series="false"
        :pagination-config="false"
        :tree-props="{ children: 'children' }"
      >
        <template #extra>
          <el-button type="primary" @click="edit(0)">新增</el-button>
          <!--<MDeleteButton-->
          <!--  :selectKeys="selectKeys"-->
          <!--  @click="del(selectKeys)"-->
          <!--&gt;</MDeleteButton>-->
        </template>

        <template #actions="{ row }">
          <MA type="primary" @click="addedSubordinates(row.id)">新增下级</MA>
          <MA type="primary" @click="edit(row.id)">编辑</MA>
          <MA type="danger" @click="del(row.id)">删除</MA>
        </template>
      </MTable>
    </el-card>
    <MFormDialog
      v-model="formDialog.visible"
      v-bind="formDialog"
      :value="form"
      :fields="dialogFields"
      :httpAdd="menuAdd"
      :httpEdit="menuEdit"
      :httpGet="menuDetail"
      @reload="getHttp"
    ></MFormDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { columns, fields, dialogFields } from './config'
import {
  menuList,
  menuAdd,
  menuDetail,
  menuEdit,
  menuDel
} from '@/api/system/menu/menu.ts'

const tableData = ref([])
//表格
const getHttp = async () => {
  let p = {
    ...params.value
  }
  const res = await menuList(p)
  tableData.value = res
}

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

const selectKeys = ref<number[]>([])

// 重载
const isReload = ref(true)
// const reload = () => {
//   isReload.value = true
// }

const form = ref<{ parent_id: number | undefined }>({
  parent_id: undefined
})

const addedSubordinates = (id: number) => {
  form.value.parent_id = id
  formDialog.id = 0
  formDialog.visible = true
}

// 新增/编辑
const formDialog = reactive({
  visible: false,
  id: 0
})

const edit = (id: number) => {
  if (id == 0) {
    form.value.parent_id = undefined
  }
  formDialog.id = id
  formDialog.visible = true
}

// 删除
const del = (id: number) => {
  menuDel(id).then(() => {
    ElMessage.success('删除成功')
    getHttp()
  })
}

getHttp()
</script>

<style lang="scss" scoped></style>
